<template>
    <!--  :class="[store.isDark ? 'file-explorer_dark' : 'file-explorer_bright']" -->
    <div :class="[store.isDark ? 'file-explorer_dark' : 'file-explorer_bright']">
        <div class="explorer-header">
            <span>文件管理器</span>
        </div>

        <!-- 文件列表 -->
        <div class="file-list">
            <FileRecord v-for="item in fileList" :fileRecord="item"></FileRecord>
        </div>
    </div>
</template>

<script setup>

import FileRecord from "./filerecord/FileRecord.vue";
import { useStore } from '../store/store'
import { storeToRefs } from "pinia";
const store = useStore()
const { fileList } = storeToRefs(store)


</script>


<style scoped>



.file-explorer_dark {
    width: var(--sidebar-width);
    background-color: #2d3038;
    color: #e1e1e6;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #181a1f;
    transition: all 0.3s ease;
}

  
.file-explorer_bright {
    width: var(--sidebar-width);
    background-color: #4e3939;
    color: #e1e1e6;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #181a1f;
    transition: all 0.3s ease;
}


.explorer-header {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 15px;
    background-color: #25262c;
    border-bottom: 1px solid #181a1f;
    font-weight: 500;
    font-size: 14px;
}


.explorer-tabs {
    display: flex;
    height: 36px;
    background-color: #25262c;
    border-bottom: 1px solid #181a1f;
    padding: 0 10px;
}

.explorer-tab {
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.explorer-tab.active {
    color: var(--text-color);
    border-bottom: 2px solid #4d78cc;
    background-color: rgba(77, 120, 204, 0.1);
}

.explorer-tab:hover {
    color: var(--text-color);
}

.file-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}


.file-list-title {
    padding: 5px 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 15px;
    margin-bottom: 5px;
}
</style>
